<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Welcome to GraphQL Yoga</title>
    <link
      rel="icon"
      href="https://raw.githubusercontent.com/graphql-hive/graphql-yoga/refs/heads/main/website/src/app/favicon.ico"
    />
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
        height: 100%;
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          'Roboto',
          'Oxygen',
          'Ubuntu',
          'Cantarell',
          'Fira Sans',
          'Droid Sans',
          'Helvetica Neue',
          sans-serif;
        color: white;
        background-color: black;
      }

      main > section.hero {
        display: flex;
        height: 90vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .logo {
        display: flex;
        align-items: center;
      }

      .buttons {
        margin-top: 24px;
      }

      h1 {
        font-size: 80px;
      }

      h2 {
        color: #888;
        max-width: 50%;
        margin-top: 0;
        text-align: center;
      }

      a {
        color: #fff;
        text-decoration: none;
        margin-left: 10px;
        margin-right: 10px;
        font-weight: bold;
        transition: color 0.3s ease;
        padding: 4px;
        overflow: visible;
      }

      a.graphiql:hover {
        color: rgba(255, 0, 255, 0.7);
      }
      a.docs:hover {
        color: rgba(28, 200, 238, 0.7);
      }
      a.tutorial:hover {
        color: rgba(125, 85, 245, 0.7);
      }
      svg {
        margin-right: 24px;
      }

      .not-what-your-looking-for {
        margin-top: 5vh;
      }

      .not-what-your-looking-for > * {
        margin-left: auto;
        margin-right: auto;
      }

      .not-what-your-looking-for > p {
        text-align: center;
      }

      .not-what-your-looking-for > h2 {
        color: #464646;
      }

      .not-what-your-looking-for > p {
        max-width: 600px;
        line-height: 1.3em;
      }

      .not-what-your-looking-for > pre {
        max-width: 300px;
      }
    </style>
  </head>
  <body id="body">
    <main>
      <section class="hero">
        <div class="logo">
          <div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="-0.41 0.445 472.812 499.811"
              height="150"
            >
              <defs>
                <linearGradient
                  id="paint0_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                  gradientTransform="matrix(8.139854, 0, 0, 8.139854, -130.346407, -113.25101)"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <linearGradient
                  id="paint1_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                  gradientTransform="matrix(8.139854, 0, 0, 8.139854, -130.346407, -113.25101)"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <linearGradient
                  id="paint2_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                  gradientTransform="matrix(8.139854, 0, 0, 8.139854, -130.346407, -113.25101)"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <linearGradient
                  id="paint3_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <linearGradient
                  id="paint4_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <linearGradient
                  id="paint5_linear_1677_11483"
                  x1="16"
                  y1="14"
                  x2="87.2132"
                  y2="44.5982"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <filter
                  id="filter0_f_1677_11483"
                  x="23"
                  y="-25"
                  width="100"
                  height="100"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1677_11483" />
                </filter>
                <filter
                  id="filter1_f_1677_11483"
                  x="-24"
                  y="19"
                  width="100"
                  height="100"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1677_11483" />
                </filter>
                <linearGradient
                  id="paint6_linear_1677_11483"
                  x1="30"
                  y1="28"
                  x2="66.1645"
                  y2="44.4363"
                  gradientUnits="userSpaceOnUse"
                  gradientTransform="matrix(8.139854, 0, 0, 8.139854, -130.346407, -113.25101)"
                >
                  <stop stop-color="#7433FF" />
                  <stop offset="1" stop-color="#FFA3FD" />
                </linearGradient>
                <filter
                  id="filter2_f_1677_11483"
                  x="-12"
                  y="-44"
                  width="100"
                  height="100"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1677_11483" />
                </filter>
                <filter
                  id="filter3_f_1677_11483"
                  x="13"
                  y="19"
                  width="100"
                  height="100"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_1677_11483" />
                </filter>
              </defs>
              <mask
                id="mask0_1677_11483"
                style="mask-type: alpha"
                maskUnits="userSpaceOnUse"
                x="16"
                y="14"
                width="58"
                height="62"
              >
                <path
                  d="M21 25.3501C21.7279 25.3501 22.4195 25.5056 23.0433 25.7853L42.1439 14.8C43.0439 14.3 44.1439 14 45.1439 14C46.2439 14 47.2439 14.3 48.1439 14.8L64.5439 24.3C63.3439 25.1 62.4439 26.3 61.8439 27.7L45.9438 18.5C45.6439 18.3 45.344 18.3 45.0441 18.3C44.7441 18.3 44.4439 18.4 44.1439 18.5L25.8225 29.0251C25.9382 29.4471 26 29.8914 26 30.3501C26 33.1115 23.7614 35.3501 21 35.3501C18.2386 35.3501 16 33.1115 16 30.3501C16 27.5887 18.2386 25.3501 21 25.3501Z"
                  fill="url(#paint3_linear_1677_11483)"
                />
                <path
                  d="M67.2438 35.0329C65.3487 34.3219 64 32.4934 64 30.35C64 27.5886 66.2386 25.35 69 25.35C71.7614 25.35 74 27.5886 74 30.35C74 32.1825 73.0142 33.7848 71.5439 34.6554V55.2C71.5439 57.4 70.3439 59.4 68.5439 60.5L52.1439 69.9C52.1439 68.4 51.6438 66.9 50.7438 65.8L66.3439 56.8C66.9439 56.5 67.2438 55.9 67.2438 55.2V35.0329Z"
                  fill="url(#paint4_linear_1677_11483)"
                />
                <path
                  d="M49.8439 69.1055C49.9458 69.5034 50 69.9204 50 70.3501C50 73.1115 47.7614 75.3501 45 75.3501C42.5102 75.3501 40.4454 73.5302 40.0633 71.1481L21.8439 60.6C19.9439 59.5 18.8439 57.5 18.8439 55.3V36.8C19.5439 37 20.3439 37.2 21.0439 37.2C21.7439 37.2 22.4439 37.1 23.0439 36.9V55.3C23.0439 56 23.4438 56.6 23.9438 56.9L41.3263 66.9583C42.2398 65.9694 43.5476 65.3501 45 65.3501C47.3291 65.3501 49.2862 66.9426 49.8419 69.0981L49.8436 69.0997L49.8439 69.1055Z"
                  fill="url(#paint5_linear_1677_11483)"
                />
              </mask>
              <mask
                id="mask1_1677_11483"
                style="mask-type: alpha"
                maskUnits="userSpaceOnUse"
                x="30"
                y="28"
                width="30"
                height="30"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M49.3945 32.3945C49.3945 34.7088 47.5796 38.5469 45 38.5469C42.4271 38.5469 40.6055 34.7112 40.6055 32.3945C40.6055 29.9714 42.5769 28 45 28C47.4231 28 49.3945 29.9714 49.3945 32.3945ZM35.332 49.0433V48.2148C35.332 42.8117 37.8535 41.0004 39.8796 39.545L39.8801 39.5447C40.3928 39.1767 40.8604 38.8404 41.2488 38.4742C42.3293 39.6642 43.626 40.3047 45 40.3047C46.3752 40.3047 47.6725 39.6642 48.7529 38.4754C49.1408 38.841 49.6078 39.1773 50.1199 39.5447L50.1204 39.545C52.1465 41.0004 54.668 42.8117 54.668 48.2148V49.0433L53.8406 49.092C49.9848 49.3185 46.8646 46.9002 45 43.5777C43.1159 46.935 39.9847 49.318 36.1594 49.092L35.332 49.0433ZM58.1463 51.0747L58.1463 51.0746C57.0179 50.891 50.0128 49.7507 45.0007 55.693C40.0116 49.7553 33.1965 50.8592 31.9095 51.0677L31.9095 51.0677C31.7906 51.087 31.7189 51.0986 31.7002 51.0963C31.7005 51.0969 31.7011 51.1045 31.7023 51.1187C31.726 51.4003 31.9682 54.2745 34.0566 56.2422L30 58H60L55.8956 56.2422C57.8537 54.4764 58.1396 52.2685 58.2508 51.4092V51.4091C58.2697 51.2628 58.2836 51.1556 58.2998 51.0963C58.2881 51.0977 58.2356 51.0892 58.1463 51.0747ZM40.4836 50.104C42.3956 49.3212 43.6746 48.1737 45 46.61C46.332 48.1841 47.6159 49.3259 49.5164 50.104C49.5356 50.1425 49.5557 50.1805 49.5756 50.2182C49.5793 50.2253 49.583 50.2323 49.5867 50.2393C48.0911 50.8127 46.4264 51.825 45.0047 53.1444C43.5906 51.8221 41.9673 50.8196 40.4256 50.2153C40.4455 50.1784 40.4648 50.1415 40.4836 50.104Z"
                  fill="black"
                />
              </mask>
              <path
                d="M 40.59 93.095 C 46.517 93.095 52.14 94.365 57.22 96.635 L 212.7 7.22 C 220.025 3.149 228.978 0.706 237.12 0.706 C 246.073 0.706 254.213 3.149 261.54 7.22 L 395.032 84.547 C 385.264 91.059 377.939 100.827 373.055 112.224 L 243.631 37.338 C 241.19 35.71 238.747 35.71 236.305 35.71 C 233.863 35.71 231.42 36.523 228.978 37.338 L 79.84 123.009 C 80.786 126.443 81.29 130.058 81.29 133.793 C 81.29 156.269 63.065 174.493 40.59 174.493 C 18.116 174.493 -0.109 156.269 -0.109 133.793 C -0.109 111.32 18.116 93.095 40.59 93.095 Z"
                fill="url(#paint0_linear_1677_11483)"
              />
              <path
                d="M 417.01 171.913 C 401.585 166.126 390.603 151.238 390.603 133.793 C 390.603 111.32 408.83 93.095 431.303 93.095 C 453.777 93.095 472.001 111.32 472.001 133.793 C 472.001 148.706 463.976 161.755 452.011 168.835 L 452.011 336.07 C 452.011 353.977 442.243 370.258 427.591 379.21 L 294.098 455.726 C 294.098 443.516 290.029 431.306 282.703 422.353 L 409.683 349.093 C 414.568 346.651 417.01 341.767 417.01 336.07 L 417.01 171.913 Z"
                fill="url(#paint1_linear_1677_11483)"
              />
              <path
                d="M 275.376 449.253 C 276.206 452.495 276.646 455.889 276.646 459.389 C 276.646 481.863 258.422 500.087 235.947 500.087 C 215.679 500.087 198.87 485.272 195.761 465.883 L 47.46 380.025 C 31.995 371.071 23.041 354.792 23.041 336.884 L 23.041 186.296 C 28.738 187.923 35.25 189.553 40.948 189.553 C 46.646 189.553 52.345 188.738 57.228 187.111 L 57.228 336.884 C 57.228 342.582 60.485 347.465 64.554 349.908 L 206.042 431.777 C 213.481 423.728 224.127 418.689 235.947 418.689 C 254.905 418.689 270.833 431.656 275.36 449.196 L 275.376 449.214 L 275.376 449.253 Z"
                fill="url(#paint2_linear_1677_11483)"
              />
              <g
                mask="url(#mask0_1677_11483)"
                transform="matrix(8.139854, 0, 0, 8.139854, -130.346375, -113.251038)"
              >
                <g filter="url(#filter0_f_1677_11483)">
                  <circle cx="73" cy="25" r="26" fill="#ED2E7E" />
                </g>
                <g filter="url(#filter1_f_1677_11483)">
                  <circle cx="26" cy="69" r="26" fill="#1CC8EE" />
                </g>
              </g>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M 271.713 150.431 C 271.713 169.275 256.948 200.517 235.947 200.517 C 215.003 200.517 200.172 169.292 200.172 150.431 C 200.172 130.708 216.225 114.666 235.947 114.666 C 255.67 114.666 271.713 130.708 271.713 150.431 Z M 157.251 285.952 L 157.251 279.212 C 157.251 235.233 177.771 220.485 194.27 208.641 C 198.447 205.644 202.247 202.901 205.414 199.923 C 214.204 209.608 224.763 214.826 235.947 214.826 C 247.138 214.826 257.697 209.608 266.496 199.931 C 269.653 202.911 273.456 205.644 277.622 208.641 C 294.114 220.485 314.642 235.233 314.642 279.212 L 314.642 285.952 L 307.912 286.351 C 276.525 288.191 251.128 268.509 235.947 241.468 C 220.611 268.795 195.126 288.191 163.981 286.351 L 157.251 285.952 Z M 342.953 302.492 C 333.771 300.994 276.751 291.715 235.955 340.082 C 195.345 291.749 139.865 300.734 129.389 302.436 C 128.428 302.59 127.841 302.688 127.687 302.665 C 127.687 302.673 127.695 302.729 127.702 302.85 C 127.897 305.138 129.867 328.532 146.872 344.55 L 113.849 358.862 L 358.044 358.862 L 324.639 344.55 C 340.576 330.177 342.905 312.202 343.807 305.212 C 343.962 304.022 344.077 303.153 344.206 302.665 C 344.108 302.68 343.686 302.606 342.953 302.492 Z M 199.188 294.59 C 214.751 288.215 225.161 278.879 235.947 266.15 C 246.788 278.96 257.241 288.255 272.707 294.59 C 272.869 294.898 273.031 295.207 273.196 295.518 C 273.219 295.574 273.252 295.631 273.285 295.688 C 261.107 300.361 247.555 308.598 235.989 319.334 C 224.477 308.573 211.258 300.417 198.715 295.493 C 198.87 295.191 199.033 294.891 199.188 294.59 Z"
                fill="url(#paint6_linear_1677_11483)"
              />
              <g
                mask="url(#mask1_1677_11483)"
                transform="matrix(8.139854, 0, 0, 8.139854, -130.346375, -113.251038)"
              >
                <g filter="url(#filter2_f_1677_11483)">
                  <circle cx="38" cy="6" r="26" fill="#ED2E7E" />
                </g>
                <g filter="url(#filter3_f_1677_11483)">
                  <circle cx="63" cy="69" r="26" fill="#1CC8EE" />
                </g>
              </g>
            </svg>
          </div>
          <h1>GraphQL Yoga</h1>
          <p>Version: __YOGA_VERSION__</p>
        </div>
        <h2>The batteries-included cross-platform GraphQL Server.</h2>
        <div class="buttons">
          <a href="https://www.the-guild.dev/graphql/yoga-server/docs" class="docs"
            >Read the Docs</a
          >
          <a href="https://www.the-guild.dev/graphql/yoga-server/tutorial/basic" class="tutorial"
            >Start the Tutorial
          </a>
          <a href="__GRAPHIQL_LINK__" class="graphiql">Visit GraphiQL</a>
        </div>
      </section>
      <section class="not-what-your-looking-for">
        <h2>Not the page you are looking for? 👀</h2>
        <p>
          This page is shown be default whenever a 404 is hit.<br />You can disable this by behavior
          via the <code>landingPage</code> option.
        </p>
        <pre>
          <code>
import { createYoga } from 'graphql-yoga';

const yoga = createYoga({
  landingPage: false
})
          </code>
        </pre>

        <p>
          If you expected this page to be the GraphQL route, you need to configure Yoga. Currently,
          the GraphQL route is configured to be on
          <code>__GRAPHIQL_LINK__</code>.
        </p>
        <pre>
          <code>
import { createYoga } from 'graphql-yoga';

const yoga = createYoga({
  graphqlEndpoint: '__REQUEST_PATH__',
})
          </code>
        </pre>
      </section>
    </main>
  </body>
</html>
